<template>
  <div :class="(giveType.indexOf(1) > -1 || giveType.indexOf(2) > -1) ? 'c-bg-f2 c-h' : ''">
    <div v-if="isFromSubmittedSuccess == -1 && recoverArr && recoverArr.gameOver" class="c-textAlign-c c-fs32 c-mt90 c-flex-column c-aligni-center c-bg-white c-pb60 c-minh100vh">
      <!-- <div class="iconfont c-fc-green c-fs150">&#xe84c;</div> -->
      <div class=" c-ww296 c-textAlign-c">
        <img src="../assets/commitSuccess.png" alt="">
      </div>
      <p v-if="isShowThanksLetter==1" class="c-fs28 c-fc-xblack c-mt60 c-fw-b">{{recoverArr.recoveryTip || '表单已收集结束，感谢您的关注'}}</p>
      <div class="c-mt80 c-fs24 border-green c-fc-green c-ww200 c-hh60 c-flex-column c-flex-center c-br30" @click="goIndex">返回首页</div>
    </div>
    <template v-else-if="isFromSubmittedSuccess == 1">
      <div class="c-textAlign-c c-fs32 c-mt90 c-flex-column c-aligni-center c-bg-white c-pb80">
        <!-- <div class="iconfont c-fc-green c-fs150">&#xe6eb;</div> -->
        <div class=" c-ww296 c-textAlign-c">
          <img src="../assets/commitSuccess.png" alt="">
        </div>
        <p v-if="formInfo.type == 1" class="c-fs28 c-fc-xblack c-fw-b c-mt40">提交成功!</p>
        <p v-if="isShowThanksLetter==1 && formInfo.type == 2" class="c-fs28 c-fc-xblack c-fw-b c-mt40">{{ thanksLetter}}</p>
        <p v-if="type" class="c-fs28 c-fc-xblack c-ph80 c-pt30">您已成功提交续费申请，审核时间为1-7个工作日。</p>
        <div class="c-flex-row c-justify-center c-alignc-center c-mt30">
          <div v-if="relType == 2" @click="viewForm" class="c-fc-smblue c-fs24">查看提交情况</div>
          <div v-if="formInfo.type == 2 && formInfo.isAllow == 1" class="c-fs24 c-fc-sgray c-mh10 ">|</div>
          <div v-if="formInfo.type == 2 && formInfo.isAllow == 1" @click="goWriteAnother" class="c-fc-smblue c-fs24 ">再填写一份</div>
        </div>
        <div v-if="isShowSkip==1 && successForm.skipRelId" class="c-flex-row c-justify-center c-alignc-center c-mt40">
          <div class="c-bg-sblue c-fc-white c-fs24 c-hh64 c-lh64 c-br40 c-ww200" @click="goToDetail()">{{ successForm.skipRelType == 196?'查看':'查看课程'}}</div>
        </div>
        <!-- <div v-if="relType == 2" @click="viewForm" class="c-ww300 c-hh80 c-lh80 c-mt80 c-fc-green border-green c-fs24">查看提交情况</div>
        <div v-if="formInfo.type == 2 && formInfo.isAllow == 1" class="c-mt30 c-fs24 c-fc-smblue" @click="goWriteAnother">再填写一份</div> -->
      </div>
      <template v-if="(giveType.indexOf(2) > -1&&isSendPoints==2) || (giveType.indexOf(1) > -1 && this.couponList.length > 0) ">
        <div class="c-bg-sgray c-hh12 c-w100"></div>
        <div class="c-ph24 c-bg-white">
          <div class="c-flex-row c-justify-sb c-pv30" :class="giveType.indexOf(1) > -1 ? 'c-bd-b1' : ''" v-if="giveType.indexOf(2) > -1&&isSendPoints==2">
            <div class="c-fs26">{{customPointName}}奖励</div>
            <div class="c-fs26 c-fc-gray">获得{{givenPoints}}{{customPointName}}</div>
          </div>
          <div class="c-flex-row c-justify-sb c-pv30" v-if="giveType.indexOf(1) > -1 && this.couponList.length > 0">
            <div class="c-fs26">优惠券礼包</div>
            <div class="c-fs26 c-fc-smblue" @click="clickShowCoupon(adCoupon.length)">{{adCoupon.length > 0 ? '立即领取' : '立即使用'}}</div>
          </div>
          <div class="c-flex-row c-justify-sb c-pv30" v-if="guideData && guideData.isOpenGuide==1">
            <div class="c-fs26">{{ guideData.guideDesc }}</div>
            <div class="c-fs26 c-fc-smblue" @click="handleShowGuidePop">立即加入</div>
          </div>
        </div>
      </template>
      <!-- 单独只有引导入群的时候 -->
      <div v-else-if="guideData && guideData.isOpenGuide==1" class="c-ph24 c-bg-white">
        <div class="c-p">
          <img src="../assets/guideJoinBg.png" alt="">
          <span class="c-pa c-fs32 c-fw800 c-fc-white c-p-t50 c-p-l200 c-ww250 c-hh80 c-flex-row c-aligni-center">{{guideData.guideDesc }}</span>
          <span class="c-pa c-p-r24 c-p-t64 c-fc-orange c-bg-white c-hh40 c-br24 c-fs20 c-flex-row c-aligni-center c-ww110 c-justify-center" @click="handleShowGuidePop">
            立即加入
          </span>
        </div>
      </div>
    </template>

    <!-- 优惠券弹窗 -->
    <coupon-modal v-if="showCouponDialog" adName="感谢您的参与" :adCoupon="adCoupon" :osId="relId" recordType="-1" :showCouponDialog.sync="showCouponDialog" @hideCouponDialog="hideCouponDialog"></coupon-modal>
    <!-- 入群引导 -->
    <group-guidance ref="guidance" :isType="false" position="bottom" :groupObject="guideData"></group-guidance>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import { exchangeDoDetail } from "@/utils/goDetails.js"
import couponModal from "@/components/templates/couponModal.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
export default {
  name: 'SubmitSuccess',
  data() {
    return {
      type: '',
      relType: '',
      showCouponDialog: false,
      givenPoints: 0, //积分
      adCoupon: [], //未领取优惠券
      couponList: [], // 优惠券列表
      giveType: [],
      thanksLetter: '', //感谢语
      getCount: 0,
      relId: '',
      isSendPoints:'',
      formInfo: {},
      tlId: '', //课时ID
      pathFrom: '',
      formType: '',
      logId: '', // 当前表单记录id，用于调研表单一人可以提交多次的情景
      recoverArr: {}, // 调研表单回收相关数据
      isFromSubmittedSuccess: 0, // 是否是表单提交成功后跳转过来的 1是 -1不是
      customPointName: localStorage.getItem("customPointName"),
      skipCourseType: '',
      skipCType: '',
      skipRelId: '',
      isShowSkip: 0,
      isShowThanksLetter: 0,
      guideData: {},
      successForm: {}
    }
  },
  components: {
    couponModal,
    groupGuidance
  },
  created() {
    utilJs.appShare(this);
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.pathFrom = from.fullPath;
    });
  },
  watch: {
  },
  methods: {
    // 引导入群点击
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    // 跳转首页
    goIndex() {
      // 履约小程序跳转需要跳回小程序
      if (sessionStorage.getItem('isKpStudy')) {
        utilJs.miniProgramGoTo('switchTab', "/pages/home/index/index");
        return
      }
      this.$routerGo(this, "push", {
        path: '/'
      })
    },
    goWriteAnother() {
      if (this.recoverArr && this.recoverArr.gameOver) {
        this.$showCjToast({
          text: this.recoverArr.recoveryTip || '表单已收集结束，感谢您的关注',
          type: "warn",
        })
        return;
      }
      this.$routerGo(this, "replace", {path: `/homePage/form?relId=${this.relId}&relType=${this.relType}&type=${this.formType}&logId=-1`});
    },
    //立即领取
    clickShowCoupon(index) {
      if (index > 0) {
        this.showCouponDialog = true
      } else {
        this.$routerGo(this, "push", { path: "/member/myValueVoucher/myValueVoucher" });
      }
    },
    // 获取优惠券积分
    getFormSuccess() {

      let url = `${global.apiurl}k12/forms/formSubmitSuccess/${this.relId}`
      utilJs.getMethod(url, res => {
        this.isShowSkip = res.isShowSkip;
        this.isShowThanksLetter = res.isShowThanksLetter;
        this.guideData = res.guideData;
        this.successForm = res
        // 主动弹窗的话
        if (this.$refs.guidance && this.guideData && this.guideData.isOpenGuide == 1 && this.guideData.guideType.includes(3)) {
          utilJs.getLeadSocialLog(global.ckFrom.form, this.relId).then(dataRes => {
            if (!dataRes || dataRes == '') {
              this.$refs.guidance.isShowPop();
              utilJs.saveLeadSocialLog(global.ckFrom.form, this.relId)
            }
          })
        }
        if (res.isShowThanksLetter == 1) {
          this.giveType = res.giveType ? res.giveType : []
          this.thanksLetter = res.thanksLetter || ''
          this.givenPoints = res.givenPoints || 0
          this.couponList = res.coupons && res.coupons.length > 0 ? res.coupons : []
          this.adCoupon = this.couponList.filter(i => i.couponStatus == 0);
          this.adCoupon.forEach(ele => {
            ele.startAt = ele.startAt ? ele.startAt.split(' ')[0].replace(/-/g, '.') : ''
            ele.endAt = ele.endAt ? ele.endAt.split(' ')[0].replace(/-/g, '.') : ''
          })
        }
        if (res.isShowSkip == 1) {
           // 提交后跳转---进行赋值页面跳转
          // -1.会员升级页，1.图文，2.音频，3.视频，4.专栏，5.打卡，6.训练营，7.活动，8.知识套餐，9.直播，10.兑换券，11.考试，12.测评专题，13.资料, 16.社群
          this.skipCourseType = res.skipRelType == 1 ? 2 : res.skipRelType == 2 ? 1 : res.skipRelType == 3 ? 0 : null
          this.skipCType = (res.skipRelType == 1 || res.skipRelType == 2 || res.skipRelType == 3) ? 37 : res.skipRelType == 4 ? 38 : res.skipRelType == 5 ? 90 : res.skipRelType == 6 ? 91 : res.skipRelType == 7 ? 99 : res.skipRelType == 8 ? 45 : res.skipRelType == 9 ? 95 : res.skipRelType == 11 ? 140 : res.skipRelType == 12 ? 85 : res.skipRelType == 13 ? 106 : res.skipRelType == -1 ? 39 : res.skipRelType == 16 ? 94 : res.skipRelType == 21 ? 127 : ''
          this.skipRelId = res.skipRelId;
          if (localStorage.getItem('formSubitShow')) {
            let formSubitShow = JSON.parse(localStorage.getItem('formSubitShow'))
            if (formSubitShow.indexOf(this.relId) > -1) {
              return
            }
            formSubitShow.push(this.relId)
            window.localStorage.setItem('formSubitShow', JSON.stringify(formSubitShow))
          } else {
            window.localStorage.setItem('formSubitShow', JSON.stringify([this.relId]))
          }
          // 不显示感谢信才直接跳转
          if (res.isShowThanksLetter == -1 && res.isShowSkip == 1 && !!res.skipRelId) {
            if (res.skipRelType == 196) {//skipRelType = 196 代表微页面类型
              this.$routerGo(this, "push", {path: res.skipRelUrl})
            } else {
              exchangeDoDetail(this, this.skipRelId, this.skipCType, this.skipCourseType)
            }

          }
        }

      })
    },
    goToDetail() {
      if (this.successForm.skipRelType == 196) {//196微页面特殊处理
        this.$routerGo(this, "push", {path: this.successForm.skipRelUrl})
      } else {
        exchangeDoDetail(this, this.skipRelId, this.skipCType, this.skipCourseType)
      }
    },
    //关闭优惠券弹框
    hideCouponDialog() {
      this.getFormSuccess()
    },
    // 返回查看表单
    viewForm() {
      // 先缓存当前表单记录对应的id，返回表单页面的时候需要用到
      if (!!this.logId && this.logId != -1) {
        sessionStorage.setItem('formLogData', JSON.stringify({formId: this.relId, logId: this.logId}))
      }
      if (this.pathFrom && this.pathFrom.includes('homePage/form')) {
        this.$router.go(-1);
      } else {
        this.$routerGo(this, "replace", {path: `/homePage/form?relId=${this.relId}&relType=${this.relType}&type=${this.formType}&logId=${this.logId}`});
      }
    },
    getFormData: function () {
      let postUrl = `${global.apiurl}k12/forms/formShow?relId=${this.relId}&relType=${this.relType}&type=${this.formType}&tlId=${this.tlId}&logId=${this.logId}`;
      utilJs.getMethod(postUrl, res => {
        if (!res) {
          this.$routerGo(this, "replace", { path: "/error/emptyPage", query: { from: this.formType == 1 ? 'form' : '', info: '未找到该表单' } });
          return;
        }
        this.formInfo = res;
        this.logId = res.logId || '';
        this.recoverArr = res.recoverArr || {};
        this.wechatShare();

        // 主动弹窗的话
        // if(res.show){
        //   this.$refs.guidance.isShowPop();
        // }
      }, failRes => {
        this.$routerGo(this, "replace", {path: "/error/emptyPage", query: {from: "", info: "未找到该表单！"}});
      });
    },
    //分享
    wechatShare: function () {
      let formInfo = this.formInfo || {}
      let title = formInfo.name || window.localStorage.getItem("shareTitle");
      let shareImg = this.type ? window.localStorage.getItem("shareLogo") : require('../assets/i/wap/course/form_share.png');
      let shareUrl = this.type ? `${window.location.href.split("#")[0]}#/` : `${window.location.href.split("#")[0]}#/homePage/form?relId=${this.relId}&relType=${this.relType}&type=${this.formType}`;
      let shareDesc = formInfo.shareDesc || window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.relId = this.$route.query.relId;
    this.relType = this.$route.query.relType;
    this.type = this.$route.query.type || '';
    this.formType = this.$route.query.formType || '';
    this.isSendPoints = this.$route.query.isSendPoints || '';
    this.logId = this.$route.query.logId || '';
    this.tlId = this.$route.query.tlId || '';
    this.isFromSubmittedSuccess = this.$route.query.isFromSubmittedSuccess == -1 ? -1 : 1;
    this.givenPoints = 0;
    this.giveType = [];
    this.adCoupon = [];
    this.couponList = [];
    this.showCouponDialog = false;
    this.formInfo = {};
    this.pathFrom = '';
    this.recoverArr = {};
    this.getFormSuccess();
    this.getFormData();
  }
}
</script>
<style scoped>
.border-green {
  border: solid 1px #4cb93b;
}
</style>

